<template>
	<view v-if="pageData" class="box-padding" style="--px: 26rpx">
		<view class="box">
			<view class="price">￥{{pageData.price}}</view>
			<view class="flex align-between fn-25 hairline--bottom">
				<text class="ml-30">合计：1项</text>
				<text class="mr-30 color-main">订单详情</text>
			</view>
			<view class="flex align-between fn-25">
				<text class="ml-30">消费金额</text>
				<text class="mr-30">￥{{pageData.price}}</text>
			</view>
			<view class="flex align-between fn-25">
				<text class="ml-30">优惠金额</text>
				<text class="mr-30 color-main">￥0.00</text>
			</view>
			<view class="flex align-between fn-25 hairline--top">
				<text class="ml-30">应付金额</text>
				<text class="mr-30 color-main">￥{{pageData.price}}</text>
			</view>
		</view>
		<view class="box">
			<view class="align-center fn-w mb-25 fn-32">支付方式</view>
			<view class="flex align-center hairline--top hairline--bottom fn-25">使用第三方支付</view>
			<view class="flex align-between vertical-center fn-25">
				<view class="ml-30 flex vertical-center">
					<view class="mr-15 box-icon-weixin icon-weixin"></view>
					微信支付
				</view>
				<view class="mr-30 box-icon-roundcheck icon-roundcheckfill"></view>
			</view>
		</view>
		<view style="padding-top: 50rpx;">
			<v-button @onclick="onPay" type="main">立即支付</v-button>
		</view>
	</view>
</template>

<script>
	import vButton from "@/components/button/button.vue";
	import CourseApi from '@/api/course.js';
	import { toast } from '@/utils/util.js';
		
	export default {
		components: {
			vButton
		},
		data() {
			return {
				id: "",
				pageData: null
			};
		},
		onLoad({id}) {
			this.id = id;
			this.getAllCourseDetail(id)
		},
		methods: {
			async getAllCourseDetail(id) {
				const res = await CourseApi.GetAllCourseDetail({id})
				this.pageData = res;
			},
			
			async onPay() {
				const res = await CourseApi.PostBuyCourse({id: this.id})
				// 发起微信支付
				this.handleRequestPayment(res)
			},
			// 处理微信支付
			handleRequestPayment(res) {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: res.timeStamp.toString(),
					nonceStr: res.nonceStr,
					package: res.package,
					signType: res.signType,
					paySign: res.paysign,
					success:()=> {
						toast('支付成功', true);
					},
					fail: (err) => {
						console.log(err)
						toast('取消支付');
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.box {
		background-color: $color-white;
		box-shadow: 3rpx 3rpx 10rpx rgba(#eee, 0.1);
		padding: 20rpx;
		border-radius: 5rpx;
		margin-bottom: 30rpx;
		text-align: center;
		.price{
			font-size: 70rpx;
			line-height: 70rpx;
			margin-top: 52rpx;
			margin-bottom: 30rpx;
		}
		.box-icon-weixin{
			width: 44rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			color: $color-white;
			font-size: 28rpx;
			border-radius: 50%;
			background-color: #00aa00;
		}
		.box-icon-roundcheck{
			color: $color-main;
			font-size: 40rpx;
		}
		> .flex{
			padding: 30rpx 0;
		}
	}
</style>
